<!DOCTYPE html>
<html class="ui-page-login">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		<style type="text/css">
	html,body,#index{margin:0;padding:0;width: 100%;height: 100%;}
	input::input-placeholder{color:  #C7C7CC ;}
	::-webkit-input-placeholder { 
		color:#C7C7CC; 
		}
	.fl{float: left;}
	.fr{float: right;}
	#index{position: relative;}
	#second_wrap{position: absolute;top: 0;left: 0;width: 100%;height: 100%;padding-top: 25%;opacity: 0;}
	#logo{
		z-index: 10;
	    position: absolute;
	    opacity: 1;
	    width: 4.5rem;
	    height: 4.5rem;
	    border-radius: 4px;
	    background: #fff;
	    top: 1.4rem;
	    left: 2rem;
	    opacity: 0;
	}
	#logo.show{
		 animation:toshow 1s 1 1s linear forwards;
    	 -webkit-animation:toshow 1s 1 1s linear forwards;
	}
	#second_wrap.second{
		animation:toshow 1s 1 1s linear forwards;
    	 -webkit-animation:toshow 1s 1 1s linear forwards;
	}
	.back{position: absolute;top:0;left: 0;}
	.skip{position: absolute;z-index: 11;}
	.skip{width: 100%;top:1.5rem;left: 0;}
	.skip a{float: right; width: 4rem;height:2rem;line-height: 2rem; background: #ddd;opacity: 0.5;border-radius: 4px;font-size:1rem;text-decoration: none;color:#000;font-weight: normal;margin-right: 1rem;text-align: center;}
    h1{position: absolute;z-index: 10; text-align: center; margin-top:25rem; width: 100%;font-weight: 500; font-size:2rem;color: #fff;}
    .require{width: 80%;margin:0 auto;border-bottom: 1px solid #777777;padding:2.5rem 1rem 1.5rem;}
    .require label{display: inline-block;width: 30%;color:#fff;font-size:1.3rem;}
    .require input{background: transparent;width: 70%; border:0;font-size: 1.3rem;height: 2rem; color:#C0C0C0;font-size:1.3rem;outline:none;}
    .require button{width: 100%;height: 3rem;background:#169bd4;color:#fff;border:0; border-radius: 8px;font-size:1rem;}
    .reg{width: 78%;margin:0 auto;}
    .reg a{text-decoration: none;color: red;font-size: 1rem;}
    .mui-input-row .mui-input-password ~ .mui-icon-eye {
	    font-size: 2rem;
	    top: 2.6rem;
        right: 2rem;
	    text-align: center;
	    color: #fff;
	}
	.mui-input-row .mui-input-clear ~ .mui-icon-clear{
		font-size: 2rem;
	    top: 2.6rem;
        right: 2rem;
	    text-align: center;
	    color: #fff;
	}
	.mui-input-row label{padding:6px 15px;}
    #title.title{
    	animation:title 1s 1 linear forwards;
    	-webkit-animation:title 1s 1 linear forwards;
    }
    #img{
    	 z-index:10;
    	 width: 16rem;
    	 height: 16rem;
    	 position: absolute;
    	 left:50%;
    	 top:13%;
    	 margin-left: -8rem;
    	 animation:mymove 5s 1 linear;
    	 -webkit-animation:mymove 5s 1 linear; /*Safari and Chrome*/
    }
     #img.second{
       animation:totop 1s 1 linear forwards;
       -webkit-animation:totop 1s 1 linear forwards; 
    }
    #index.hide{
    	animation:tohide 1s 1 linear forwards;
       -webkit-animation:tohide 1s 1 linear forwards; 
    }
    @keyframes mymove
    {
       from{transform:rotate(0deg);
       }
       to{
       	  transform:rotate(360deg);
       }
       
    }

    @-webkit-keyframes mymove 
    {
         from{
           -webkit-transform:rotate(0deg); /* Safari 和 Chrome */
       }
       to{
       	 -webkit-transform:rotate(360deg); /* Safari 和 Chrome */
       }
    }
    @keyframes totop
    {
       to{
       	 top:-4.3rem;
       	 left: 4.3rem;
       	 transform:scale(0.2);
       }
       
    }

    @-webkit-keyframes totop 
    {
       to{
       	  top:-4.3rem;
       	 left: 4.3rem;
       	 -webkit-transform:scale(0.2);
       }
    }
    @keyframes tohide
    {
       to{
       	opacity: 0;
       }
       
    }

    @-webkit-keyframes tohide 
    {
       to{
       	 opacity: 0;
       }
    }
    @keyframes toshow
    {
       to{
       	opacity: 1;
       }
       
    }

    @-webkit-keyframes toshow 
    {
       to{
       	 opacity: 1;
       }
    }
    @keyframes title
    {
       to{
       	margin-top: 2.5rem;
       	font-size: 1.5rem;
       }
       
    }

    @-webkit-keyframes title 
    {
       to{
       	 margin-top: 2.5rem;
       	 font-size: 1.5rem;
       }
    }
	</style>

	</head>

	<body>
		<div id="logo"></div>
	    <h1  id="title">高青电力物联感知平台</h1>
	    <img src="img/u12.png" id="img" alt="">
	    <img src="img/u10.png" class="back" width="100%" height="100%" alt="">
		<div id="index">
			<div class="skip">
				<a href="javascript:void(0);" id="tiao">跳过</a>
			</div>
		</div>
		<div id="second_wrap">
		  	  <div class="require mui-input-row">
		  	  	<label>用户名</label>
		  	  	<input style="padding-bottom: 0;line-height: 1.5;padding-top: 0;" type="text" name="name" id="account" class="required mui-input-clear" placeholder="请输入用户名">
		  	  </div>
		  	  <div class="require  mui-input-row">
		  	  	<label>密码</label>
		  	  	<input type="passward" name="password" id="password" class="required mui-input-password" placeholder="请输入密码">
		  	  </div>
		  	  <div class="require mui-button-row"style="border-bottom: 0;" >
		  	  	<button type="button" id="log">登陆</button>
		  	  </div>
			  <div class="reg">
			  	<a href="javascript:void(0);" id="reg" class="fl">注册</a>
			  	<a href="javascript:void(0);" id="forgetPassword" class="fr">忘记密码</a>
			  </div>
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/mui.enterfocus.js"></script>
		<script src="js/app.js"></script>
		<script src="js/public.js"></script>
		<script>
			var o = document.getElementById('img');
			var el = document.getElementById('index');
			var logo = document.getElementById('logo');
			var title = document.getElementById('title');
			var tiao = document.getElementById('tiao');
			var second_wrap = document.getElementById('second_wrap');
			o.addEventListener("webkitAnimationEnd", function() {
			   o.classList.add("second"); 
			   el.classList.add("hide");
			   logo.classList.add("show");
			   title.classList.add("title");
			   second_wrap.classList.add("second");
			})
			tiao.addEventListener('touchstart',function(){
				o.classList.add("second"); 
			   el.classList.add("hide");
			   logo.classList.add("show");
			   title.classList.add("title");
			   second_wrap.classList.add("second");
			});
			//
			//
			//
			(function($, doc) {
				$.init({
					statusBarBackground: '#f7f7f7'
				});
				$.plusReady(function() {
					plus.screen.lockOrientation("portrait-primary");
					var settings = app.getSettings();
					var state = app.getState();
					var mainPage = $.preload({
						"id": 'main',
						"url": 'main.html'
					});
					var main_loaded_flag = false;
					mainPage.addEventListener("loaded",function () {
						main_loaded_flag = true;
					});
					var toMain = function() {
						//使用定时器的原因：
						//可能执行太快，main页面loaded事件尚未触发就执行自定义事件，此时必然会失败
						var id = setInterval(function () {
							if(main_loaded_flag){
								clearInterval(id);
								$.fire(mainPage, 'show', null);
								mainPage.show("pop-in");
							}
						},200);
                       $.openWindow({
							url: 'main.html',
							id: 'main',
							show: {
								aniShow: 'pop-in'
							},
							waiting: {
								autoShow: false
							}
						});
					};
					//检查 "登录状态/锁屏状态" 开始
					if (settings.autoLogin && state.token && settings.gestures) {
						$.openWindow({
							url: 'unlock.html',
							id: 'unlock',
							show: {
								aniShow: 'pop-in'
							},
							waiting: {
								autoShow: false
							}
						});
					} else if (settings.autoLogin && state.token) {
						toMain();
					}
					// close splash
					setTimeout(function() {
						//关闭 splash
						plus.navigator.closeSplashscreen();
					}, 600);
					//检查 "登录状态/锁屏状态" 结束
					var loginButton = doc.getElementById('log');
					var accountBox = doc.getElementById('account');
					var passwordBox = doc.getElementById('password');
					var autoLoginButton = doc.getElementById("autoLogin");
					var regButton = doc.getElementById('reg');
					var forgetButton = doc.getElementById('forgetPassword');
					accountBox.focus();
					app.createState = function(name, callback) {
						var state = app.getState();
						state.account = name;
						app.setState(state);
						return callback();
					};
					loginButton.addEventListener('tap', function(event) {
						var loginInfo = {
							account: accountBox.value,
							password: passwordBox.value
						};
						if (loginInfo.account.length < 5) { 
								plus.nativeUI.toast('账号最短为 5 个字符');
								return;
						}
						if (loginInfo.password.length < 6) {
							plus.nativeUI.toast('密码最短为 6 个字符');
							return;
						}
                       toMain();
					    console.log(loginInfo.account);
						    mui.ajax({
					            type: "POST",
							    url: __PATH__+"index/login",
							    async: true,
							    data:{
							    	 username:loginInfo.account,
					                 password:loginInfo.password
							    },
							    dataType: "json",
							    json: "jsoncallback",
							    timeout: 1000,
							    success: function(data) {
							    	if(data.code==401){
								plus.nativeUI.toast("用户名不存在！");
							    	}else if(data.code==400){
								plus.nativeUI.toast("密码错误！");
							    	}else if(data.code==200){
							    		localStorage.setItem('$users', JSON.stringify(loginInfo));
										var users = JSON.parse(localStorage.getItem('$users') || '[]');
							    		app.login(loginInfo.account);
							    		toMain();
							    		
							    	}							    	
							    }
//							    error:function(xhr,type,errorThrown){
//									mui.alert(xhr,'提示') 				
//								}
							}); 
							

					});
					$.enterfocus('#second_wrap input', function() {
						$.trigger(loginButton, 'tap');
					});
					regButton.addEventListener('tap', function(event) {
						$.openWindow({
							url: 'reg.html',
							id: 'reg',
							preload: true,
							show: {
								aniShow: 'pop-in'
							},
							styles: {
								popGesture: 'hide'
							},
							waiting: {
								autoShow: false
							}
						});
					}, false);
					forgetButton.addEventListener('tap', function(event) {
						$.openWindow({
							url: 'forget_password.html',
							id: 'forget_password',
							preload: true,
							show: {
								aniShow: 'pop-in'
							},
							styles: {
								popGesture: 'hide'
							},
							waiting: {
								autoShow: false
							}
						});
					}, false);
					//
//					window.addEventListener('resize', function() {
//						oauthArea.style.display = document.body.clientHeight > 400 ? 'block' : 'none';
//					}, false);
					//
					var backButtonPress = 0;
					$.back = function(event) {
						backButtonPress++;
						if (backButtonPress > 1) {
							plus.runtime.quit();
						} else {
							plus.nativeUI.toast('再按一次退出应用');
						}
						setTimeout(function() {
							backButtonPress = 0;
						}, 1000);
						return false;
					};
				});
			}(mui, document));
		</script>
	</body>

</html>